<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老人管理 - 养老院管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body>
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-brand">
        <h4 class="text-white">养老院管理系统</h4>
    </div>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">管理菜单</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/dashboard}">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>仪表板</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/users}">
                <i class="fas fa-fw fa-users"></i>
                <span>用户管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" th:href="@{/admin/elderly}">
                <i class="fas fa-fw fa-user-friends"></i>
                <span>老人管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/staff}">
                <i class="fas fa-fw fa-user-nurse"></i>
                <span>员工管理</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/health-records}">
                <i class="fas fa-fw fa-heartbeat"></i>
                <span>健康记录</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/admin/medications}">
                <i class="fas fa-fw fa-pills"></i>
                <span>药物管理</span>
            </a>
        </li>
    </ul>
    <hr class="sidebar-divider">
    <div class="sidebar-heading">账户</div>
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link" th:href="@{/profile}">
                <i class="fas fa-fw fa-user-circle"></i>
                <span>个人资料</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" th:href="@{/logout}">
                <i class="fas fa-fw fa-sign-out-alt"></i>
                <span>退出登录</span>
            </a>
        </li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="content">
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand navbar-light bg-white mb-4 shadow">
        <button id="sidebarToggle" class="btn btn-link d-md-none rounded-circle mr-3">
            <i class="fas fa-bars"></i>
        </button>
        <h5 class="mb-0">老人管理</h5>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${#authentication.name}">管理员</span>
                    <i class="fas fa-user-circle fa-fw"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-right shadow" aria-labelledby="userDropdown">
                    <a class="dropdown-item" th:href="@{/profile}">
                        <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                        个人资料
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" th:href="@{/logout}">
                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                        退出登录
                    </a>
                </div>
            </li>
        </ul>
    </nav>

    <!-- 页面内容 -->
    <div class="container-fluid">
        <!-- 页面标题和添加按钮 -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">老人列表</h1>
            <a th:href="@{/admin/add-elderly}" class="btn btn-primary">
                <i class="fas fa-plus fa-sm text-white-50"></i> 添加老人
            </a>
        </div>

        <!-- 提示消息 -->
        <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
            <span th:text="${successMessage}">操作成功！</span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger alert-dismissible fade show" role="alert">
            <span th:text="${errorMessage}">操作失败！</span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <!-- 搜索和筛选 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">搜索和筛选</h6>
            </div>
            <div class="card-body">
                <form th:action="@{/admin/elderly}" method="get" class="form-inline">
                    <div class="form-group mb-2 mr-2">
                        <label for="nameSearch" class="sr-only">姓名</label>
                        <input type="text" class="form-control" id="nameSearch" name="name" placeholder="姓名" th:value="${param.name}">
                    </div>
                    <div class="form-group mb-2 mr-2">
                        <label for="ageMin" class="sr-only">最小年龄</label>
                        <input type="number" class="form-control" id="ageMin" name="ageMin" placeholder="最小年龄" th:value="${param.ageMin}">
                    </div>
                    <div class="form-group mb-2 mr-2">
                        <label for="ageMax" class="sr-only">最大年龄</label>
                        <input type="number" class="form-control" id="ageMax" name="ageMax" placeholder="最大年龄" th:value="${param.ageMax}">
                    </div>
                    <div class="form-group mb-2 mr-2">
                        <label for="gender" class="sr-only">性别</label>
                        <select class="form-control" id="gender" name="gender">
                            <option value="">-- 选择性别 --</option>
                            <option value="男" th:selected="${param.gender == '男'}">男</option>
                            <option value="女" th:selected="${param.gender == '女'}">女</option>
                        </select>
                    </div>
                    <div class="form-group mb-2 mr-2">
                        <label for="healthStatus" class="sr-only">健康状况</label>
                        <select class="form-control" id="healthStatus" name="healthStatus">
                            <option value="">-- 健康状况 --</option>
                            <option value="良好" th:selected="${param.healthStatus == '良好'}">良好</option>
                            <option value="稳定" th:selected="${param.healthStatus == '稳定'}">稳定</option>
                            <option value="需要关注" th:selected="${param.healthStatus == '需要关注'}">需要关注</option>
                            <option value="危急" th:selected="${param.healthStatus == '危急'}">危急</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary mb-2">搜索</button>
                    <a th:href="@{/admin/elderly}" class="btn btn-secondary mb-2 ml-2">重置</a>
                </form>
            </div>
        </div>

        <!-- 老人列表 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">老人列表</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered dataTable" id="elderlyTable" width="100%" cellspacing="0">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th>入住日期</th>
                            <th>健康状况</th>
                            <th>紧急联系人</th>
                            <th>联系电话</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="elderly : ${elderlyList}">
                            <td th:text="${elderly.id}">1</td>
                            <td th:text="${elderly.name}">王老先生</td>
                            <td th:text="${elderly.age}">78</td>
                            <td th:text="${elderly.gender}">男</td>
                            <td th:text="${#dates.format(elderly.admissionDate, 'yyyy-MM-dd')}">2023-06-10</td>
                            <td>
                                        <span th:class="${elderly.healthStatus == '良好' ? 'badge badge-success' :
                                                         elderly.healthStatus == '稳定' ? 'badge badge-info' :
                                                         elderly.healthStatus == '需要关注' ? 'badge badge-warning' :
                                                         'badge badge-danger'}"
                                              th:text="${elderly.healthStatus}">良好</span>
                            </td>
                            <td th:text="${elderly.emergencyContact}">王小明</td>
                            <td th:text="${elderly.contactPhone}">13800138000</td>
                            <td>
                                <a th:href="@{/admin/elderly/{id}(id=${elderly.id})}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a th:href="@{/admin/elderly/{id}/edit(id=${elderly.id})}" class="btn btn-sm btn-primary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a th:href="@{/admin/elderly/{id}/delete(id=${elderly.id})}" class="btn btn-sm btn-danger btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        <!-- 示例数据 -->
                        <tr>
                            <td>1</td>
                            <td>王老先生</td>
                            <td>78</td>
                            <td>男</td>
                            <td>2023-06-10</td>
                            <td><span class="badge badge-success">良好</span></td>
                            <td>王小明</td>
                            <td>13800138000</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a href="#" class="btn btn-sm btn-primary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-sm btn-danger btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>刘老太太</td>
                            <td>82</td>
                            <td>女</td>
                            <td>2023-06-08</td>
                            <td><span class="badge badge-info">稳定</span></td>
                            <td>刘女士</td>
                            <td>13900139000</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a href="#" class="btn btn-sm btn-primary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-sm btn-danger btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>张先生</td>
                            <td>75</td>
                            <td>男</td>
                            <td>2023-06-05</td>
                            <td><span class="badge badge-warning">需要关注</span></td>
                            <td>张小姐</td>
                            <td>13700137000</td>
                            <td>
                                <a href="#" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> 查看
                                </a>
                                <a href="#" class="btn btn-sm btn-primary">
                                    <i class="fas fa-edit"></i> 编辑
                                </a>
                                <a href="#" class="btn btn-sm btn-danger btn-delete">
                                    <i class="fas fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div th:if="${totalPages > 0}" class="d-flex justify-content-center">
                    <nav>
                        <ul class="pagination">
                            <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled' : ''">
                                <a class="page-link" th:href="@{/admin/elderly(page=0, size=${size}, name=${param.name}, ageMin=${param.ageMin}, ageMax=${param.ageMax}, gender=${param.gender}, healthStatus=${param.healthStatus})}" aria-label="First">
                                    <span aria-hidden="true">&laquo;&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item" th:classappend="${currentPage == 0} ? 'disabled' : ''">
                                <a class="page-link" th:href="@{/admin/elderly(page=${currentPage - 1}, size=${size}, name=${param.name}, ageMin=${param.ageMin}, ageMax=${param.ageMax}, gender=${param.gender}, healthStatus=${param.healthStatus})}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item" th:each="i : ${#numbers.sequence(0, totalPages - 1)}" th:classappend="${currentPage == i} ? 'active' : ''">
                                <a class="page-link" th:href="@{/admin/elderly(page=${i}, size=${size}, name=${param.name}, ageMin=${param.ageMin}, ageMax=${param.ageMax}, gender=${param.gender}, healthStatus=${param.healthStatus})}" th:text="${i + 1}">1</a>
                            </li>
                            <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled' : ''">
                                <a class="page-link" th:href="@{/admin/elderly(page=${currentPage + 1}, size=${size}, name=${param.name}, ageMin=${param.ageMin}, ageMax=${param.ageMax}, gender=${param.gender}, healthStatus=${param.healthStatus})}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="page-item" th:classappend="${currentPage == totalPages - 1} ? 'disabled' : ''">
                                <a class="page-link" th:href="@{/admin/elderly(page=${totalPages - 1}, size=${size}, name=${param.name}, ageMin=${param.ageMin}, ageMax=${param.ageMax}, gender=${param.gender}, healthStatus=${param.healthStatus})}" aria-label="Last">
                                    <span aria-hidden="true">&raquo;&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script th:src="@{/js/main.js}"></script>
</body>
</html>